<template>
  <div class="index">
    <van-sticky>
      <van-nav-bar class="nav">
        <template #title>
          <div class="nav-title">
            <img src="@/assets/logo1.png" alt="" />
          </div>
        </template>
        <template #right>
          <van-icon
            name="search"
            size="24"
            class="nav-icon"
            @click.native="$router.push('/search?next=/index')"
          />
        </template>
      </van-nav-bar>
      <div class="mybox" v-if="channelsList.length">
        <van-tabs
          v-model="active"
          border
          animated
          @click="tabClick"
          class="mytabs"
        >
          <van-tab
            v-for="(item, index) in channelsList"
            :key="index"
            :title="item.name"
            :name="item.id"
          >
          </van-tab>
        </van-tabs>
        <div class="process" @click="showPopup">
          <van-icon name="wap-nav" class="icon-chann"></van-icon>
        </div>
      </div>
    </van-sticky>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-pull-refresh v-model="pullLoading" @refresh="refresh">
        <van-cell
          class="cell"
          v-for="(item, index) in articleList"
          :key="index"
          @click="$router.push('/detail/' + item.art_id + '?next=/index')"
        >
          <div class="cell-content" v-if="item.cover.images.length > 2">
            <h3 class="title">
              {{ item.title }}
            </h3>
            <div class="picture">
              <!-- <img :src="item.cover.images[0]" alt="" /> -->
              <van-image class="img" lazy-load :src="item.cover.images[0]">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>加载失败</template></van-image
              >
              <van-image
                lazy-load
                class="mid-img img"
                :src="item.cover.images[1]"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>加载失败</template></van-image
              >
              <van-image class="img" lazy-load :src="item.cover.images[2]">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>加载失败</template></van-image
              >
            </div>
          </div>
          <div class="cell-content" v-else-if="item.cover.images.length > 0">
            <div class="top">
              <h3 class="title">
                {{ item.title }}
              </h3>
              <van-image class="img" lazy-load :src="item.cover.images[0]">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>加载失败</template></van-image
              >
            </div>
          </div>
          <div class="cell-content" v-else>
            <h3 class="title">
              {{ item.title }}
            </h3>
          </div>
          <div class="cell-bottom">
            <div class="nickname">{{ item.aut_name }}</div>
            <div class="com-num">{{ item.comm_count }}评论</div>
            <div class="time">{{ item.pubdate | fromtime }}</div>
            <van-icon
              name="cross"
              class="myClear"
              @click.stop="myClearEvent(item)"
            ></van-icon>
          </div>
        </van-cell>
      </van-pull-refresh>
    </van-list>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '80%' }"
      @close="closePop"
    >
      <div class="popup-contnet">
        <van-cell title="我的频道">
          <template #extra>
            <van-button @click="editEvent">
              <template>
                <div class="btn">
                  {{ editState ? '完成' : '编辑' }}
                </div>
              </template>
            </van-button>
          </template>
        </van-cell>
        <div class="curr-chann">
          <van-grid>
            <van-grid-item
              class="grid"
              v-for="(item, index) in channelsList"
              :key="index"
            >
              <template>
                <div
                  class="t1"
                  :class="{ active: item.id === active }"
                  @click="tabClick(item.id)"
                >
                  {{ item.name }}
                  <van-icon
                    name="clear"
                    class="myicon"
                    :class="{ clearShow: editState && item.id !== 0 }"
                    @click.stop="clearChan(index)"
                  ></van-icon>
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
        <van-cell title="推荐频道"></van-cell>
        <van-grid>
          <van-grid-item
            v-for="(item, index) in channelsAll"
            :key="index"
            :text="item.name"
            @click="addChan(index)"
          />
        </van-grid>
      </div>
    </van-popup>
    <van-popup
      v-model="showArticle"
      :style="{ width: '85%', ['border-radius']: '10px' }"
    >
      <div class="report1" v-if="report">
        <van-cell title="不感兴趣" @click="dislike"></van-cell>
        <van-cell
          title="反馈垃圾内容"
          is-link
          @click="report = false"
        ></van-cell>
        <van-cell title="拉黑作者" @click="blackAuthor"></van-cell>
      </div>
      <div class="otherReport" v-else>
        <van-cell icon="arrow-left" @click="report = true"></van-cell>
        <van-cell
          @click="reportArticle(index)"
          v-for="(item, index) in reportType"
          :key="index"
          :title="item"
        ></van-cell>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  apiGetChannelsList,
  apiGetAllChannel,
  apiUpdateChannel
} from '@/api/channel'
import {
  apiGetArticle,
  apiDislike,
  apiBlackAuthor,
  apiReportArticle
} from '@/api/article'
import Vue from 'vue'
import { Lazyload } from 'vant'
Vue.use(Lazyload)
export default {
  name: 'index',
  data () {
    return {
      active: 0,
      channelsList: [],
      channelsAll: [],
      articleList: [],
      loading: false,
      finished: false,
      channelsId: 0,
      show: false,
      editState: false,
      showArticle: false,
      report: true,
      reportType: [
        '其它问题',
        '标题夸张',
        '低谷色情',
        '错误字多',
        '旧闻重发',
        '广告软文',
        '内容不实',
        '涉嫌违法犯罪',
        '侵权'
      ],
      articleInfo: '',
      tempChannelsList: [],
      tempChannelsAll: [],
      pullLoading: false
    }
  },
  async created () {
    const res = await apiGetChannelsList()
    const res2 = await apiGetAllChannel()
    this.channelsList = res.data.data.channels
    const _tempAll = res2.data.data.channels
    this.channelsList.forEach(item => {
      _tempAll.forEach(item2 => {
        if (item.name === item2.name) {
          item2.del = true
        }
      })
    })
    this.channelsAll = _tempAll.filter(item => !item.del)
  },
  methods: {
    // 切换频道
    async tabClick (name) {
      this.active = name
      this.loading = true
      this.finished = false
      this.articleList = []
      this.onLoad()
    },
    async onLoad () {
      const res2 = await apiGetArticle(this.active)
      this.articleList.push(...res2.data.data.results)
      this.loading = false
      this.finished = this.articleList.length >= res2.data.data.page
    },
    showPopup () {
      this.show = true
    },
    closePop () {
      if (this.editState) {
        this.editState = false
        this.channelsAll = this.tempChannelsAll
        this.channelsList = this.tempChannelsList
      }
    },
    editEvent () {
      this.editState = !this.editState
      if (!this.editState) {
        const _temp = JSON.parse(JSON.stringify(this.channelsList))
        _temp.forEach((item, index) => {
          item.seq = index + 1
        })
        _temp.splice(0, 1)
        apiUpdateChannel(_temp)
        this.show = false
      } else {
        this.tempChannelsList = JSON.parse(JSON.stringify(this.channelsList))
        this.tempChannelsAll = JSON.parse(JSON.stringify(this.channelsAll))
      }
    },
    addChan (index) {
      if (this.editState) {
        this.channelsList.push(this.channelsAll.splice(index, 1)[0])
      }
    },
    clearChan (index) {
      this.channelsAll.push(this.channelsList.splice(index, 1)[0])
    },
    myClearEvent (item) {
      this.showArticle = true
      this.articleInfo = item
      console.log(item)
    },
    // 文章不感兴趣
    dislike () {
      apiDislike(this.articleInfo.art_id)
      this.articleList.splice(this.articleList.indexOf(this.articleInfo), 1)
      this.showArticle = false
      this.$notify({ type: 'danger', message: '感谢您的反馈' })
    },
    // 拉黑作者
    blackAuthor () {
      apiBlackAuthor(this.articleInfo.aut_id)
      this.showArticle = false
      this.articleList.forEach(item => {
        if (item.aut_id === this.articleInfo.aut_id) {
          item.remove = true
        }
      })
      this.$notify({ type: 'danger', message: '感谢您的反馈' })
      this.articleList = this.articleList.filter(item => !item.remove)
    },
    // 举报文章
    reportArticle (type) {
      apiReportArticle({ artid: this.articleInfo.art_id, type })
      this.articleList.splice(this.articleList.indexOf(this.articleInfo), 1)
      this.report = true
      this.$notify({ type: 'danger', message: '感谢您的反馈' })
      setTimeout(() => {
        this.showArticle = false
      }, 1000)
    },
    async refresh () {
      const res2 = await apiGetArticle(this.active)
      this.articleList.shift(...res2.data.data.results)
      this.pullLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  .mybox {
    .mytabs {
      width: 90%;
      display: inline-block;
      overflow: hidden;
    }
    .process {
      vertical-align: top;
      float: right;
      padding: 0px 3px;
      background: #fff;
      width: 8.4%;
      height: 44px;
      text-align: center;
      .icon-chann {
        line-height: 44px;
        font-size: 26px;
        color: #8c8c8c;
      }
    }
  }
  ::v-deep .nav {
    background: #d0584d;
    font-family: 'HanziPenTC-W3';
    .van-nav-bar__title {
      font-size: 24px;
      color: white;
    }
    .nav-icon {
      color: white;
      font-weight: bold;
    }
    .nav-title {
      width: 200px;
      height: 46px;
      position: relative;
      img {
        height: 60%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .cell {
    .cell-content {
      .title {
        margin: 2px;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 6px;
        font-weight: bold;
        word-wrap: break-word;
        word-break: break-all;
        font-family: sans-serif;
      }
      .picture {
        display: flex;
        justify-content: space-between;
        .img {
          height: 80px;
          width: 110px;

          ::v-deep .van-image__img {
            width: 110px;
            object-fit: cover;
            background: #ccc;
          }
        }
        .mid-img {
          margin: 0px 5px;
        }
        margin-bottom: 10px;
      }
      .top {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 16px;
          line-height: 25px;
          margin: 0px 10px 6px 0px;
        }
        .img {
          height: 80px;
          width: 110px;
          object-fit: cover;
          ::v-deep .van-image__img {
            width: 110px;
            object-fit: cover;
            background: #ccc;
          }
        }
      }
    }
    .cell-bottom {
      padding-top: 4px;
      display: flex;
      justify-content: flex-start;
      font-size: 12px;

      color: #8c8c8c;
      .com-num {
        margin: 0px 16px;
      }
      .time {
        flex: 1;
        text-align: left;
      }
      .myClear {
        font-size: 18px;
        text-align: center;
        line-height: 24px;
        padding: 0px 8px;
        // border: 1px solid #d3d2d2;
        transition: all 0.5s;
        &:hover {
          transform: rotate(1080deg);
        }
      }
    }
  }
  .popup-contnet {
    .curr-chann {
      .grid {
        position: relative;
        .t1 {
          text-align: center;
          width: 100%;
          color: #646566;
          font-size: 12px;
          line-height: 18px;
          .myicon {
            position: absolute;
            right: 0;
            top: 0;
            color: #646566;
            display: none;
          }
          .clearShow {
            display: block;
          }
        }
      }
    }
    ::v-deep .active {
      color: red !important;
    }
    ::v-deep .van-button {
      padding: 0;
      border: 0;
      height: 22px;
      border-radius: 11px;

      .btn {
        width: 50px;
        border: 1px solid red;
        background: white;
        color: red;
        font-size: 12px;
        border-radius: 11px;
        line-height: 22px;
        padding-top: 0;
        padding-bottom: 0;
      }
    }
    .more {
      height: 50px;
    }
  }
}
</style>
